// 引入库
import React, { Component } from "react";
// 引入axios
import axios from "axios";
// 引入组件
import Banner from "../../components/banner/banner";
import Content from "../../components/content/content";
// 定义组件并暴露接口
export default class Start extends Component {
  // 数据也可以放在状态中
  constructor(props) {
    super(props);
    // 状态
    this.state = {
      //   title: props.title,
      //   intro:
      // "简要介绍 Bootstrap，以及如何下载、使用，还有基本模版和案例，等等。",
      data: []
      //   url:"data/start.json"
    };
  }
  // 我们可以在componentWillMount或者是componentDidMount中请求数据
  componentWillMount() {
    // 发送get请求
    axios
      .get(this.props.url)
      // 监听数据返回
      .then(({ data }) => this.setState({ data }));
  }
  render() {
    // 解构数据
    let { title, intro, style } = this.props;
    // 根据style属性，决定页面是否渲染
    return (
      <div style={{ display: style ? "" : "none" }} className="app-page">
        <Banner title={title} intro={intro} />
        <Content data={this.state.data} />
      </div>
    );
  }
}
